<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script>
		var urlParams = (function(url)
		{
			var result = new Object();
			var params = window.location.search.slice(1).split('&');
			
			for (var i = 0; i < params.length; i++)
			{
				idx = params[i].indexOf('=');
				
				if (idx > 0)
				{
					result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
				}
			}
			
			return result;
		})(window.location.href);
	
		// Public global variables
		var MAX_REQUEST_SIZE = 10485760;
		var MAX_AREA = 10000 * 10000;

		// Paths and files
		var STENCIL_PATH = 'stencils';
		var SHAPES_PATH = 'shapes';
		var IMAGE_PATH = 'images';
		// Path for images inside the diagram
		var GRAPH_IMAGE_PATH = 'img';
		var STYLE_PATH = 'styles';
		var CSS_PATH = 'styles';
		
		// Directory for i18 files and basename for main i18n file
		var RESOURCES_PATH = 'resources';
		var RESOURCE_BASE = RESOURCES_PATH + '/dia';
		var isLocalStorage = typeof(Storage) != 'undefined';

		/**
		 * Synchronously adds scripts to the page.
		 */
		function mxscript(src)
		{
			document.write('<script src="'+src+'"></scr' + 'ipt>');
		};
		
		// Sets the base path, the UI language via URL param and configures the
		// supported languages to avoid 404s. The loading of all core language
		// resources is disabled as all required resources are in grapheditor.
		// properties. Note that in this example the loading of two resource
		// files (the special bundle and the default bundle) is disabled to
		// save a GET request. This requires that all resources be present in
		// the special bundle.
		var mxLoadResources = false;
		var mxLanguage = 'en'
		
		var geBasePath = 'js';
		var mxBasePath = 'mxgraph';
		
		mxscript('js/app.min.js');
	</script>
</head>
<body>
	<script>
		// Handles relative images
		mxGraph.prototype.getImageFromBundles = function(key)
		{
			if (key != null)
			{
				if (key.substring(0, 7) != 'http://' && key.substring(0, 8) != 'https://' && key.substring(0, 10) != 'data:image')
				{
					if (key.charAt(0) == '/')
					{
						key = key.substring(1, key.length);
					}
					
					key = 'http://drawdotio.appspot.com/' + key;
				}
				
				return key;
			}
			
			return null;
		};
		
		function render(xml)
		{
			var container = document.createElement('div');
			document.body.appendChild(container);
			
			var graph = new Graph(container);

			var doc = mxUtils.parseXml(xml);
			var codec = new mxCodec(doc);
			codec.decode(doc.documentElement, graph.getModel());
			
			var scale = graph.view.scale;
			var bounds = graph.getGraphBounds();

			// Prepares SVG document that holds the output
			var svgDoc = mxUtils.createXmlDocument();
			var root = (svgDoc.createElementNS != null) ?
				svgDoc.createElementNS(mxConstants.NS_SVG, 'svg') : svgDoc.createElement('svg');
		    
			if (root.style != null)
			{
				root.style.backgroundColor = '#FFFFFF';
			}
			else
			{
				root.setAttribute('style', 'background-color:#FFFFFF');
			}
		    
		    if (svgDoc.createElementNS == null)
		    {
		    	root.setAttribute('xmlns', mxConstants.NS_SVG);
		    }
		    
			root.setAttribute('width', Math.ceil(bounds.width * scale + 2) + 'px');
			root.setAttribute('height', Math.ceil(bounds.height * scale + 2) + 'px');
			root.setAttribute('xmlns:xlink', mxConstants.NS_XLINK);
			root.setAttribute('version', '1.1');
		    
		    // Adds group for anti-aliasing via transform
			var group = (svgDoc.createElementNS != null) ?
				svgDoc.createElementNS(mxConstants.NS_SVG, 'g') : svgDoc.createElement('g');
			group.setAttribute('transform', 'translate(0.5,0.5)');
			root.appendChild(group);
			svgDoc.appendChild(root);

			// Renders graph. Offset will be multiplied with state's scale when painting state.
			var svgCanvas = new mxSvgCanvas2D(group);
			svgCanvas.translate(Math.floor(1 / scale - bounds.x), Math.floor(1 / scale - bounds.y));
			svgCanvas.scale(scale);

			var imgExport = new mxImageExport();
			imgExport.drawState(graph.getView().getState(graph.model.root), svgCanvas);

			return mxUtils.getXml(root);
		};
	</script>
</body>
</html>
